<template>
  <div id="jingxuan">
    <div class="box">
      <div class="box1">
          <span @click=" jingxuan">精选专题</span><span class="a1">&gt;</span>
      </div>
      <div class="box2">
        <ul>
          <li v-for="item in list" :key="item.id" @click="pao(item.id)">
            <img :src="item.pic" alt="">
            <p v-html="item.title"></p>
            <p class="aa">{{item.descript}}</p>
          </li>
        </ul>
      </div>
    </div>
 </div>
</template>

<script>
import {getjingxuan} from '../utils/api'
export default {
  name: '',
  data() { 
    return {
      list:[]
    }
  },
  created() {
    getjingxuan().then(res=>{
     
      this.list=res
     
    })
  },
  methods:{
    jingxuan(){
      this.$router.push('/yanxuanzhuanlan')
    },
    pao(id){
      this.$router.push({
        path:'/zhuanlanxiangqing',
        query:{
          id
        }
      })
    }

  },
 }
</script>

<style scoped lang='scss'>
.box{
  width: 103%;
  height: 320px;
  background-color: #cccc;
  .box1{
    width: 100%;
    height: 50px;
    // background-color: blue;
    text-align: center;
    line-height: 50px;
    background-color: white;
    .a1{
      margin-left: 10px;
      font-size: 18px;
    }
   
  }
   .box2{
      width: 100%;
      height: 260px;
      // background-color: red;
      overflow: auto;
      ul{
        width: 465%;
        display: flex;
        height: 100%;
        background-color: white;
        li{
          width:19%;
          flex-grow: 0;
          flex-shrink: 0;
          padding: 8px;
          img{
            width: 100%;
            height: 180px;
            border-radius: 10px;
          }
          p{
            width: 100%;
             white-space: nowrap;
            overflow: hidden;

          text-overflow: ellipsis;
          }
          .aa{
            font-size: 14px;
            margin-top: 10px;
            color: #cccc;
          }
        }
      }
    }
}
</style>